<template>
<div id="Languages-Container">
    <h2 class="Lang-Title">{{ lang.available_languages }}</h2>
    <div class="Lang-List">
        <a v-for="item in availableLangs" :key="item.code" class="Lang-Item" @click="changeLanguage(item.code)">
            <div class="Lang-Image"></div>
            <p class="Lang-Label">{{ item.label }}</p>
        </a>
    </div>
</div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("lang/management", ["current", "available"]),
    lang() {
      return this.$store.state.lang;
    },
    availableLangs() {
        return this.available.list
    }
  },
  methods: {
      ...mapActions("lang/management", ["changeLanguage"])
  },
  created() {
    this.$store.dispatch("lang/management/listLanguages");
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/colors";

$language-item-padding: 20px;

#Languages-Container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-direction: column;
  width: 100%;
  overflow: auto;
}

.Lang-Title {
    color: $color-primary;
    margin: {
        bottom: 50px;
    }
}

.Lang-List {
    // background-color: yellow;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: center;
}

.Lang-Item {
    width: 150px;
    height: 150px;
    // background-color: orange;
    text-align: center;
    margin: {
        left: $language-item-padding;
        right: $language-item-padding;
    }
}

.Lang-Image {
    width: 150px;
    height: 120px;
    background-color: rgb(231, 231, 231);
}

.Lang-Label {
    height: 30px;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    color: $color-primary;
}
</style>
